<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/09
  File: 05.3解决异步设置值每个组件都是独立的.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>07.2有状态组件和变量存储元素</title>
  <style></style>
</head>

<body>
  <!-- 这是 react渲染到页面上的结点 可以创建多个节点 -->
  <div id="root"></div>

  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="../js/react@16.development.js" crossorigin></script>
  <script src="../js/react-dom@16.development.js" crossorigin></script>
  <script src="../js/babel@6.min.js"></script>


  <!-- 加载我们的 React 组件。-->
  <script type="text/babel">

    // 在 React 中，你可以创建不同的组件来封装各种你需要的行为。
    // 然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。
    function UserGreeting(props) { return <h1>Welcome back!</h1> }
    function GuestGreeting(props) { return <h1>Please sign up.</h1> }

    function Greeting(props) {
      const isLoggedIn = props.isLoggedIn
      if (isLoggedIn) {
        return <UserGreeting />
      }
      return <GuestGreeting />
    }
    // 元素变量

    function LoginButton(props) {
      return (<button onClick={props.onClick}> Login (登录) </button>);
    }

    function LogoutButton(props) {
      return (<button onClick={props.onClick}> Logout (登出) </button>);
    }

    class LoginControl extends React.Component {
      constructor(props) {
        super(props);
        this.handleLoginClick = this.handleLoginClick.bind(this)
        this.handleLogoutClick = this.handleLogoutClick.bind(this)
        this.state = { isLoggedIn: false }
      }

      handleLoginClick() { this.setState({ isLoggedIn: true }); }

      handleLogoutClick() { this.setState({ isLoggedIn: false }); }

      render() {
        const isLoggedIn = this.state.isLoggedIn;
        let button;

        isLoggedIn
          // 如果登录 文字为欢迎用户回归 点击事件改成 登出
          ? button = <LoginButton onClick={this.handleLogoutClick} />
          : button = <LogoutButton onClick={this.handleLoginClick} />

        return (
          <div>
            <p>the user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in</p>
            <Greeting isLoggedIn={isLoggedIn} />
            {button}
          </div>
        )
      }
    }


    ReactDOM.render(
      <LoginControl />,
      document.getElementById('root')
    );
  </script>
</body>

</html>